import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';
import 'package:shop/notifier/net_notifier.dart';
import 'package:webview_flutter/webview_flutter.dart';

class CommonWebPage extends StatefulWidget {
  final String url;

  CommonWebPage({@required this.url});

  @override
  _CommonWebPageState createState() => _CommonWebPageState();
}

class _CommonWebPageState extends State<CommonWebPage> {
  WebViewController _controller;
  NetNotifier _netNotifier;

  @override
  void initState() {
    super.initState();
    _netNotifier = NetNotifier();
  }

  @override
  Widget build(BuildContext context) {
    _netNotifier.checkConnected();
    return Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(MediaQuery.of(context).size.height * 0.07),
          child: SafeArea(
            top: true,
            child: Offstage(),
          ),
        ),
        body: WillPopScope(
          onWillPop: () {
            return _goBack(context);
          },
          child: ChangeNotifierProvider(
            create: (_) => _netNotifier,
            child: Consumer(
              builder: (BuildContext context, NetNotifier netNotifier, Widget child) {
                return netNotifier.isConnect
                    ? WebView(
                        //initialUrl: 'https://store.fandanfanli.com/#/',
                        //允许执行JS
                        javascriptMode: JavascriptMode.unrestricted,
                        onWebViewCreated: (controller) {
                          this._controller = controller;
                          _controller.loadUrl(widget.url, headers: {
                            'Referer': widget.url,
                          });
                        },
                        onPageStarted: (url) {
                          netNotifier.checkConnected();
                        },
                        onPageFinished: (url) {
                          _controller.canGoForward();
                        },
                        gestureNavigationEnabled: true,
                      )
                    : _buildWebViewFailWidget();
              },
            ),
          ),
        ));
  }

  @override
  void dispose() {
    super.dispose();
  }

  Widget _buildWebViewFailWidget() {
    return Container(
      width: double.infinity,
      child: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 100, bottom: 20),
            child: Container(
              child: Image.asset(
                'res/images/common_network_error.png',
                fit: BoxFit.fitWidth,
                width: 180,
              ),
            ),
          ),
          Text(
            '请检查你的网络设置',
            style: const TextStyle(fontSize: 14, color: Color(0xFF999999)),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 30),
            child: InkWell(
              child: Text('重新加载',
                  style: const TextStyle(fontSize: 16, color: Color(0xFF4C60FF), fontWeight: FontWeight.w500)),
              onTap: () => _onPressedReload(),
            ),
          )
        ],
      ),
    );
  }

  Future<bool> _goBack(BuildContext context) async {
    if (_controller != null && await _controller.canGoBack()) {
      _controller.goBack();
      return false;
    }
    return true;
  }

  void _onPressedReload() {
    if (_controller == null) {
      return;
    }
    _netNotifier.checkConnected();
    _controller.reload();
  }
}
